<template>
  <div id="app">
    <div class="botombar">
      <router-link to="/home"><span class="iconfont icon-shouye1"></span><p>首页</p></router-link>
      <router-link to="/watch"><span class="iconfont icon-dibutubiao_kandian"></span><p>看点</p></router-link>
      <router-link to="/news" ><span class="iconfont icon-xiaoxi"></span><p>消息</p></router-link>
      <router-link to="/follow"><span class="iconfont icon-guanzhu"></span><p>关注</p></router-link>
      <router-link to="/mypage"><span class="iconfont icon-wode"></span><p>我的</p></router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
*{
  margin: 0;
  height: 0;
}
html{font-size: 24.16vw;}
body{font-size: 0.16rem;}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
.botombar{
  position: fixed;
  bottom: -0.01rem;
  width: 100%;
  height: .5rem;
  display: flex;
  background: white;
  z-index: 55;
  
}
.botombar a{
  font-weight: bold;
  color: #999999;
  text-align: center;
  flex: 1;
  margin-top: .08rem;
}
.botombar a.router-link-exact-active {
  color: #3371f8;
}
.botombar a span{
  font-size: .2rem;
}
.botombar a p{
  font-size: .1rem;
}
.botombar a:nth-child(3){
  position: relative;
}
.botombar a:nth-child(3)::before{
  content: "8";
  width: .13rem;
  height: .13rem;
	background-color: #fd1d3f;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: .2rem;
  top: -0.06rem;
  font-size: .06rem;
  color: aliceblue;
  line-height: .13rem;
}
</style>
